<template>
	<view class="container">
		<view class="name">报名人信息</view>
		<type :htmlData="formData"></type>
		<view class="form-box box-togol" @tap="goInfo(activityInfoData.id)">
			<view class="uli">
				<image src="../../static/index-imag.png"></image>
				<view>
					<view class="mine-name">{{activityInfoData.title}}</view>
					<view class="mine-address">{{activityInfoData.subtitle}}</view>
					<view class="mine-data">{{activityInfoData.sign_start_date+'至'+activityInfoData.sign_end_date}}</view>
				</view>
			</view>
			<view class="box-flex botton-bot">
				<text>消耗积分</text>
				<view class="money">
					<text  v-if="activityInfoData">￥{{activityInfoData.exp_point}}</text>
					<text>积分</text>
				</view>
			</view>
			
		</view>
		<view class="btn">
			<view>
				<text v-if="activityInfoData">{{activityInfoData.exp_point}}</text>
				<text>积分</text>
			</view>

			<view class="to-pay" @click="pay" v-if="formInfo" :style="{background:formInfo.button_color}">{{formInfo.button_name}}</view>
		</view>
		<!-- <linkAddress ref="linkAddress" :height="height"></linkAddress> -->
		<view class="alert" v-if="alertState">
			<view class="content">
				<image src="../../static/faguang.png" class="uimga" mode=""></image>
				<view class="topText">
					<text class="price">-{{activityInfoData.exp_point}}积分</text>
					<text class="infots">恭喜您，报名成功</text>
					<text class="price">现在就去完成活动任务吧</text>
					<text class="alert-btn" @click="next">去做任务</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import linkAddress from '../../compontents/xuan-linkAddress/xuan-linkAddress.vue';
import {activityList,post} from '@/utils/interface.js'
import type from '../../compontents/type/type'
export default {
	components: {
		
		type
	},
	data() {
		return {
			data: '请选择地址',
			height: '500px',
			address: '',
			schooleList: ['一中', '二中', '三中'],
			schooleIndex: '',
			classList:[
				['一年级','二年级','三年级','四年级'],
				['一班','二班','三班','四班']
			],
			classIndex:'',
			text:"",
			alertState:false,
			activityInfoData:null,
			formData:null,
			formInfo:null
		};
	},
	methods: {
		box(e) {
			console.log(e);
		},
		//点击弹出弹窗
		popup_bottom: function() {
			this.height = '550rpx';
			//显示
			this.show_popup();
		},
		//显示弹窗
		show_popup: function() {
			this.$refs.linkAddress.show();
		},
		bindPickerChange(e) {
			this.schooleIndex = e.target.value;
		},
		bindPickerChange2(e){
			let i = e.target.value[0]
			let j = e.target.value[1]
			this.text = this.classList[0][i]+this.classList[1][j]
		},
		pay(){
			let formData = {}
			this.formData.map((item,idx)=>{
				if(item.required==1&&!item.value){
					uni.showModal({
					    title: '提示',
					    content: '请输入表单必填项',
					});
					return false
				}
				formData[item.id]=item.value
			})
			post({
				method:"activities.form_submit",
				token:uni.getStorageSync('token'),
				form_id:this.activityInfoData.form_id,
				activity_id:this.activityInfoData.id,
				items:formData
			}).then(res=>{
				if(res.status){
					this.alertState=true
				}
				console.log(res.data)
			})
		},
		next(){
			uni.switchTab({
				url:"/pages/me/me"
			})
		},
		// 获取表单
		activityForm(id){
			activityList({method:"activities.form",form_id:id,token:uni.getStorageSync('token')}).then(res=>{
				console.log(res,"获取的表单")
				if(res.data.user_submit){
					uni.showModal({
					    title: '提示',
					    content: res.msg,
						success:function(){
							uni.switchTab({
								url:"/pages/index/index"
							})
						}
					});
					return false
				}
				this.formData = res.data.items
				this.formInfo = res.data
			})
		},
		// 活动详情
		activityInfo(id){
			activityList({method:"activities.activity",id}).then(res=>{
				console.log(res.data,"活动详情")
				this.activityInfoData = res.data
				this.activityForm( res.data.form_id)
			})
		},
		goInfo(id){
			uni.navigateTo({
				url:"../sign/activityDetails?id="+id
			})
		},
		getForm(e){
			
		}
	},
	onLoad(options){
		this.activityInfo(options.id)
	},
	created() {
		let that = this;
		
	}
};
</script>

<style>
	.alert{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.alert .content{
		background-color:#fff;
		width: 477upx;
		height: 511upx;
		border-radius: 28upx;
		position: relative;
	}
	.uimga{
		display: block;
		width: 465upx;
		height: 465upx;
		margin: -196upx auto 0;
	}
	.price{
		color: #AAAFB5;
		font-size: 28upx;
		display: block;
		text-align: center;
	}
	.infots{
		font-size: 34upx;
		color: #EC3F1C;
		display: block;
		text-align: center;
		margin: 40upx auto 35upx;
	}
	.alert-btn{
		width: 400upx;
		height: 88upx;
		background-color: #EC3F1C;
		color: #fff;
		font-size: 32upx;
		text-align: center;
		line-height: 88upx;
		border-radius: 60upx;
		display: block;
		margin: 30upx auto 0;
	}
	.topText{
		position: absolute;
		width: 100%;
		top: 162upx;
	}
	uni-picker{
		height: 100%;
		width: 400upx;
		display: flex;
		align-items: center;
	}

.holder {
	color: #8a8a8a;
	font-size: 28upx;
}
.name {
	color: #828282;
	font-size: 24upx;
	line-height: 72upx;
	padding: 0 50upx;
}
.form-box {
	width: 650upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 18upx;
	margin: auto;
	padding: 0 24upx;
	margin-bottom: 20upx;
}
.items-flex {
	display: flex;
	align-items: center;
	height: 96upx;
	font-size: 30upx;
}
.items-flex > text:nth-of-type(1) {
	width: 200upx;
}
.items-flex input {
	font-size: 30upx;
}

.uli {
	display: flex;
}
.uli image {
	width: 274upx;
	height: 158upx;
	margin-right: 26upx;
	background: #f3f3f3;
}
.mine-name {
	font-size: 30upx;
	color: #3f3f3f;
	margin-bottom: 24upx;
}
.mine-address {
	color: #828282;
	font-size: 24upx;
}
.mine-data {
	color: #828282;
	font-size: 24upx;
}
.box-togol {
	padding: 24upx;
}
.box-flex {
	margin-top: 24upx;
	display: flex;
	align-items: center;
	height: 108upx;
	justify-content: space-between;
	font-size: 30upx;
}
.money {
	display: flex;
	align-items: flex-end;
}
.money text:nth-of-type(1) {
	color: #ec3f1c;
	margin-right: 6upx;
}
.money text:nth-of-type(2) {
	color: #a7a7a7;
	font-size: 20upx;
}
.li-name {
	font-size: 28upx;
	color: #3f3f3f;
	line-height: 80upx;
}
.li-list {
	font-size: 24upx;
	line-height: 60upx;
}
.btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 98upx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1upx solid #dadada;
	padding-left: 24upx;
	background: #fff;
}
.btn text {
	margin-right: 20upx;
	color: #ec3f1c;
}
.to-pay {
	width: 260upx;
	height: 98upx;
	background: #ec3f1c;
	color: #ffffff;
	line-height: 98upx;
	text-align: center;
}
.container {
	padding-bottom: 100upx;
}
</style>
